<template>
    <el-main>
        <!-- 搜索框 -->
        <el-form :model="params" ref="searchForm" label-width="90px" :inline="true" size="small">
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="addTeacher">添加老师</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="bindClass">教师绑定班级</el-button>

                <el-button type="primary" icon="el-icon-plus" @click="addStudent">添加学生</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="resetUser">密码重置</el-button>
                <!-- <el-button  type="primary" icon="el-icon-plus" @click="addIntroduction">添加管理员</el-button> -->
            </el-form-item>
        </el-form>

        <sys-dialog v-if="actionType == 2" :title="dialog.title" :visible="dialog.visible" :width="dialog.width"
            :height="dialog.height" @onClose="onClose" @onConfirm="onTeacherConfirm">
            <div slot="content">
                <el-form :model="addTeacherContent.user.teacher" ref="addTeacherForm" :rules="rules" label-width="80px"
                    :inline="false" size="small">
                    <el-form-item prop="name" label="姓名">
                        <el-input v-model="addTeacherContent.user.teacher.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="sex" label="性别">
                        <el-radio v-model="addTeacherContent.user.teacher.sex" label="m">男</el-radio>
                        <el-radio v-model="addTeacherContent.user.teacher.sex" label="f">女</el-radio>
                    </el-form-item>
                    <el-form-item prop="tno" label="教师编号">
                        <el-input v-model="addTeacherContent.user.teacher.tno"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="addTeacherContent.user.teacher.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="phoneNumber" label="手机号">
                        <el-input v-model="addTeacherContent.user.teacher.phoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item prop="subjectId" label="任课名称">
                        <el-select v-model="addTeacherContent.user.teacher.subjectId" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.subjectName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item prop="user.teacher.classIds" label="所教班级">
                        <el-checkbox-group v-model="user.teacher.classIds">
                            <el-checkbox label="20软件工程1班"></el-checkbox>
                            <el-checkbox label="20软件工程2班"></el-checkbox>
                            <el-checkbox label="20软件工程3班"></el-checkbox>
                            <el-checkbox label="20软件工程4班"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item> -->
                </el-form>
            </div>
        </sys-dialog>

        <sys-dialog v-if="actionType == 4" :title="dialog.title" :visible="dialog.visible" :width="dialog.width"
            :height="dialog.height" @onClose="onClose" @onConfirm="onBindClassConfirm">
            <div slot="content">
                <el-form :model="bindClassContent" ref="bindClassForm" :rules="rules" label-width="80px" :inline="false"
                    size="small">
                    <el-form-item prop="tno" label="教师编号">
                        <el-input v-model="bindClassContent.tno"></el-input>
                    </el-form-item>
                    <el-form-item prop="cid" label="班级名称">
                        <el-select v-model="bindClassContent.cid" placeholder="请选择">
                            <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
        </sys-dialog>

        <sys-dialog v-if="actionType == 1" :title="dialog.title" :visible="dialog.visible" :width="dialog.width"
            :height="dialog.height" @onClose="onClose" @onConfirm="onStudentConfirm">
            <div slot="content">
                <el-form :model="addStudentContent.user.student" ref="addStudentForm" :rules="rules" label-width="80px"
                    :inline="false" size="small">
                    <el-form-item prop="name" label="姓名">
                        <el-input v-model="addStudentContent.user.student.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="sex" label="性别">
                        <el-radio v-model="addStudentContent.user.student.sex" label="m">男</el-radio>
                        <el-radio v-model="addStudentContent.user.student.sex" label="f">女</el-radio>
                    </el-form-item>
                    <el-form-item prop="sno" label="学号">
                        <el-input v-model="addStudentContent.user.student.sno"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="addStudentContent.user.student.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="classId" label="所在班级名称">
                        <el-select v-model="addStudentContent.user.student.classId" placeholder="请选择">
                            <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </sys-dialog>

        <sys-dialog v-if="actionType == 3" :title="dialog.title" :visible="dialog.visible" :width="dialog.width"
            :height="dialog.height" @onClose="onClose" @onConfirm="onResetConfirm">
            <div slot="content">
                <el-form :model="resetPass" ref="resetPasswordForm" :rules="rules" label-width="200px" :inline="false"
                    size="small">
                    <el-form-item prop="userNo" label="请输入学生学号/教师编号">
                        <el-input v-model="resetPass.userNo"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </sys-dialog>
    </el-main>
</template>

<script>
import { addUser, resetPasswordApi, getSubjectListApi, getClassListApi,bindClassApi } from "@/api/user"
import SysDialog from "@/components/System/SysDialog.vue";
import Cookies from "js-cookie";
export default {
    name: "userManage",
    components: {
        SysDialog,
    },
    data() {
        return {
            tableHeight: 0,
            actionType: 0,
            dialog: {
                title: "",
                visible: false,
                width: 550,
                height: 320,
            },
            params: {
                total: 0,
            },
            tableList: [],
            addTeacherContent: {
                user: {
                    student: {},
                    teacher: {
                        id: 0,
                        tno: 0,
                        password: '',
                        name: '',
                        subjectId: 0,
                        phoneNumber: '',
                        sex: '',
                    },
                    admin: {}
                },
                type: 2
            },
            bindClassContent: {
                tno: 0,
                cid: 0
            },
            addStudentContent: {
                user: {
                    student: {
                        id: 0,
                        sno: 0,
                        password: '', 
                        name: '',
                        classId: 0,
                        sex: '',
                    },
                    teacher: {},
                    admin: {}
                },
                type: 1
            },
            resetPass: {
                userNo: 0,
            },
            // classIds: ['20软件工程1班', '20软件工程2班']
            userType: "",
            options: [],
            options2: [],
            rules: {
                name: [
                    {
                        required: blur,
                        trigger: "change",
                        message: "请输入姓名!",
                    },
                ],
            },
        };
    },
    created() {
        this.getList();
        this.userType = localStorage.getItem("type");
    },
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200;
        });
        this.getList()
    },
    methods: {
        //获取列表
        async getList() {
            getSubjectListApi().then((res) => {
                this.options = res.data;
                // console.log(res);
                // console.log(this.options);
            })
            // 获取班级
            getClassListApi().then((res) => {
                this.options2 = res.data;
                // console.log(res);
                // console.log(this.options);
            })
        },
        //     //获取实验列表
        //     if (this.userType == '1') {
        //         var res = await getStudentIntroductionApi(this.params);
        //         var success = res.success
        //     } else if (this.userType == '2') {
        //         var res = await getTeacherIntroductionApi(this.params);
        //         var success = res.success
        //     }
        //     if (success) {
        //         this.tableList = res.data;
        //         this.params.total = res.data.total;
        //     }
        // },
        //新增
        addTeacher() {
            this.actionType = 2;
            this.$resetForm("addTeacherForm", this.addTeacherContent.user.teacher);
            console.log('2', this.addTeacherContent.user.teacher);
            this.addTeacherContent.typeNo = "0";
            this.dialog.title = "添加教师";
            this.dialog.visible = true;
        },
        bindClass() {
            this.actionType = 4;
            this.$resetForm("bindClassForm", this.bindClassContent);
            // console.log('2', this.bindClassContent);
            this.bindClassContent.typeNo = "0";
            this.dialog.title = "绑定班级";
            this.dialog.visible = true;

        },
        addStudent() {
            this.actionType = 1;
            this.$resetForm("addStudentForm", this.addStudentContent.user.student);
            this.addStudentContent.typeNo = "0";
            this.dialog.title = "添加学生";
            this.dialog.visible = true;
        },
        resetUser() {
            this.actionType = 3;
            this.$resetForm("resetPasswordForm", this.resetPass.userNo);
            this.resetPass.typeNo = "0";
            this.dialog.title = "重置密码";
            this.dialog.visible = true;
        },
        // 编辑
        editIntroduction(row) {
            this.dialog.title = "编辑实验介绍";
            //清空表单数据
            this.$resetForm("addForm", this.addContent);
            this.addContent.typeNo = "1";
            // 编辑回显
            this.$objCoppy(row, this.addContent);
            this.dialog.visible = true;
        },
        // 删除
        async deleteIntroduction(row) {
            let confirm = await this.$myconfirm("确定删除该实验介绍吗？");
            if (confirm) {
                let res = await deleteIntroductionApi({ id: row.id });

                //删除成功，刷新列表
                if (res.success) {
                    this.getList();
                    this.$message.success(res.msg);
                }
            }
        },
        //确认对话框
        onTeacherConfirm() {
            this.$refs.addTeacherForm.validate(async (valied) => {
                if (valied) {
                    var res = null;
                    if (this.addTeacherContent.typeNo == "0") {
                        console.log(this.addTeacherContent);
                        res = await addUser(this.addTeacherContent);
                    } else {
                        console.log(this.addTeacherContent);
                        res = await updateIntroductionApi(this.addTeacherContent);
                    }
                    if (res.success) {
                        //请求成功 刷新列表
                        this.getList();
                        this.dialog.visible = false;
                        this.$message.success(res.data);
                    }
                }
            });
        },
        onBindClassConfirm() {
            this.$refs.bindClassForm.validate(async (valied) => {
                if (valied) {
                    var res = null;
                    if (this.bindClassContent.typeNo == "0") {
                        console.log(this.bindClassContent);
                        res = await bindClassApi(this.bindClassContent);
                    } else {
                        console.log(this.bindClassContent);
                        res = await updateIntroductionApi(this.bindClassContent);
                    }
                    if (res.success) {
                        //请求成功 刷新列表
                        this.getList();
                        this.dialog.visible = false;
                        this.$message.success(res.data);
                    }
                }
            });
        },
        onStudentConfirm() {
            this.$refs.addStudentForm.validate(async (valied) => {
                if (valied) {
                    var res = null;
                    if (this.addStudentContent.typeNo == "0") {
                        console.log(this.addStudentContent);
                        res = await addUser(this.addStudentContent);
                    } else {
                        console.log(this.addStudentContent);
                        res = await updateIntroductionApi(this.addStudentContent);
                    }
                    if (res.success) {
                        //请求成功 刷新列表
                        this.getList();
                        this.dialog.visible = false;
                        this.$message.success(res.data);
                    }
                }
            });
        },
        onResetConfirm() {
            this.$refs.resetPasswordForm.validate(async (valied) => {
                if (valied) {
                    var res = null;
                    console.log(this.resetPass);
                    console.log(this.resetPass.userNo);
                    var rrr = this.resetPass.userNo;
                    res = await resetPasswordApi(rrr);
                    if (res.success) {
                        //请求成功 刷新列表
                        // this.getList();
                        this.dialog.visible = false;
                        this.$message.success(res.data);
                    } else {
                        this.$message.error(res.errorMsg);
                    }
                }
            });
        },
        //关闭对话框
        onClose() {
            this.dialog.visible = false;
        },
        //页容量改变时触发
        sizeChange(val) {
            this.params.pageSize = val;
            this.getList();
        },
        //当前页数改变时触发
        currentChange(val) {
            this.params.currentPage = val;
            this.getList();
        },
        // 搜索
        searchUser() {
            this.getList();
        },
        // 重置表格
        // resetUser() {
        //     this.params.name = "";
        //     this.params.phoneNumber = "";
        //     this.params.idCard = "";
        //     this.getList();
        // },
    },
};
</script>

<style lang="scss" scoped></style>